<template>
  <div class="person-set">
    <el-dropdown trigger="click">
      <el-avatar :src="userinfo.pic" :size="30" />
      <template #dropdown>
        <div class="show-person">
          <el-avatar :src="userinfo.pic" :size="80" />
          <span>{{ userinfo.username }}</span>
          <span>
            <el-icon>
              <IconPark :icon="Data" :stroke-width="3" />
            </el-icon>积分:{{ userinfo.code }}</span>
        </div>  
        <el-dropdown-menu>
          <el-dropdown-item style="display: flex;justify-content: center;font-size: 15px; font-weight: 300;" @click="turnToPerson"><el-icon>
              <IconPark :icon="Me" :stroke-width="4" />
            </el-icon>个人中心</el-dropdown-item>
          <el-dropdown-item style="display: flex;justify-content: center;font-size: 15px; font-weight: 300;" @click="LogOut"><el-icon>
              <IconPark :icon="Logout" :stroke-width="4" />
            </el-icon>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { Logout, Me, Data } from "@icon-park/vue-next";
import { useRouter } from "vue-router";
import { useUserInfo } from "@store/userinfo";
import { storeToRefs } from "pinia";
import { userlogout } from "@/api/userapi";

const router = useRouter();
const store = useUserInfo();
const { userinfo } = storeToRefs(store);

const turnToPerson = () => {
  router.push({
    path: "/main/personcenter"
  })
}


const LogOut = async () => {
  const res = await userlogout();
  if (res.code === 200) {
    ElMessage.success(res.msg);
    router.push({
      path: "/login"
    })
    localStorage.removeItem("token");
  }
}


</script> 

<style scoped lang="less">
.person-set {
  width: 50px;
}

.show-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  height: 135px;

  span {
    font-size: 15px;
    margin-top: 5px;
    font-weight: 300;
  }

  span:last-child {
    display: flex;
  }
}
</style>
